<template>
  <el-dialog class="dialog" v-model="dialogVisible" :width="isMobile ? '80%' : '30%'" destroy-on-close @close="close">
    <template #header="{ close, titleId, titleClass }">
      <div class="btns">
        <div class="btn active">{{ currentRow?.title || "频道1" }}</div>
      </div>
    </template>
    <div class="content">
      <video class="video" ref="videoRef" :src="src" autoplay controls muted controlsList="nodownload" />
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { getVideoByLqmsApi } from "@/apis/videoControlDialog.js";
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => { },
  },
});
const isMobile = inject("isMobile");
const dialogVisible = ref(false);
const videoRef = ref(null);
const src = ref("");
const route = useRoute();
watchEffect(() => {
  src.value = props.currentRow?.src;
});
/* const getVideo = async () => {
  const res = await getVideoListApi("202500001");
  console.log("adasd", res);
  const videoList = res.videos.sort(
    (a, b) => new Date(b.createdate) - new Date(a.createdate)
  ); // 按时间排序
  const latestVideo = videoList[0]; // 获取最新的视频
  console.log("convertedPath", latestVideo);
  src.value = `http://172.16.12.243:8181/video/${latestVideo.id}`;
}; */

const getVideo = async () => {
  try {
    const res = await getVideoByLqmsApi()
    console.log("res", res.data);
    if (res.data.code !== 200) {
      throw new Error(res.data.msg);
    }
    src.value = "https://www.mountagent.com/video/" + res.data.rows.filter(item => item.conversionStatus === "success")[0].hashid;
  } catch (error) {
    ElMessage.error(error?.message || "数据获取失败");
  }
}

let dom = null;
const open = (text) => {
  dom = text;
  dialogVisible.value = true;
  if (route.query.name == "龙泉山") {
    getVideo();
  }
  // nextTick(() => {
  //   if (videoRef.value) {
  //     videoRef.value.play()
  //   }
  // })
};

const close = () => {
  if (dom) {
    dom.style.opacity = "0";
  }
  dialogVisible.value = false;
};

defineExpose({ open, close });
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;

  /* 根据实际需求调整高度 */
  .video {
    width: 100%;
    height: 100%;
    /* 根据实际需求调整高度 */
  }
}
</style>
